<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>POST2的学习</title>
    <style>
        .custom-textarea2 {
            width: 40rem;
            height: 300px;
            text-align: left;
            word-wrap: break-word;
            white-space: pre-wrap; /* 确保换行符正常显示 */
            padding: 5px;
            margin: 0;
            overflow: auto; /* 添加滚动条，内容超出时自动显示 */
        }
    </style>
</head>

<body>
<!-- 将按钮和输入框移到 body 标签中 -->
<button type="button" class="btn btn-secondary" id="post-api-button">调用post_API</button>
<br>
<input type="text" id="post-input" class="custom-textarea2" placeholder="输入 data 内容">
<br>
<textarea id="post-result" readonly></textarea>
<!-- 添加用于显示 POST 请求结果的文本框 -->
<script>
    const postButton = document.getElementById('post-api-button');
    const postInput = document.getElementById('post-input');
    const postResultInput = document.getElementById('post-result');

    postButton.addEventListener('click', function () {
        // 获取输入框中的内容
        const inputData = postInput.value;
        // 清空结果文本框内容
        if (postResultInput) {
            postResultInput.value = '';
        }

        // 构建符合服务器要求的 JSON 请求体
        const requestBody = {
            data: inputData
        };

        // 使用 fetch API 发送 POST 请求
        fetch('http://localhost:9901/app01/xunlei_input', {
            method: 'POST',
            headers: {
                // 设置请求头为 application/json
                'Content-Type': 'application/json'
            },
            // 将请求体对象转换为 JSON 字符串
            body: JSON.stringify(requestBody)
        })
            .then(response => {
                // 检查响应状态是否成功
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                // 将响应数据解析为 JSON 对象
                return response.json();
            })
            .then(data => {
                if (data.code === 200) {
                    if (postResultInput) {
                        postResultInput.value = `请求成功：${data.info}`;
                        postInput.value = '';

                    }
                } else {
                    if (postResultInput) {
                        postResultInput.value = `请求失败：${data.info}`;
                    }
                }
            })
            .catch(error => {
                // 处理请求过程中出现的错误
                console.error('Fetch error:', error);
                if (postResultInput) {
                    postResultInput.value = `请求出错: ${error.message}`;
                }
            });
    });
</script>
</body>

</html>